<template>
  <div class="brand-page" v-if="brandInfo">
    <Scroll class="brand-scroll" :data="brandInfo">
      <div>
        <div class="swiper-container">
          <swiper ref="mySwiper" :options="swiperOptions">
            <swiper-slide v-for="(item, index) of brandInfo.banners" :key="index">
              <img :src="item" alt />
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
        <div class="content">
          <div class="top">
            <div class="info-box">
              <div class="title">{{brandInfo.name}}</div>
              <div class="tel-wrapper">
                <div v-for="(item, index) of brandInfo.information" :key="index">
                  <div class="tel-row" v-if="item.tel">
                    <span>{{item.shop_id === '1' ? '全球家居1号店' : '欧丽洛雅吴中路商场'}} {{ item.shop_address }}</span>
                    <a :href="'tel:'+ item.tel">
                      <i></i>
                    </a>
                  </div>
                </div>
              </div>
              <div class="desc">{{brandInfo.description}}</div>
            </div>
            <div
              class="coupon"
              @click="viewMoreClick"
              v-if="userInfo ? !userInfo.identity_type && brandInfo.coupons.length : true && brandInfo.coupons.length"
            >
              <div class="left">
                <p class="name">{{brandInfo.name}}品牌店专属优惠券</p>
                <p class="lot">更多优惠等你来领</p>
              </div>
              <div class="right">
                <span>
                  查
                  <br />看
                  <br />更
                  <br />多
                  <br />
                </span>
              </div>
            </div>
          </div>
          <div class="bottom">
            <div class="title">
              <i></i>
              品牌介绍
            </div>
            <div class="intro-msg" v-html="brandInfo.detail"></div>
          </div>
        </div>
      </div>
    </Scroll>
    <van-action-sheet :round="false" v-model="show" title="品牌优惠券" class="coupon-action-sheet">
      <div class="coupon-action-inner">
        <div
          class="coupon-item"
          v-for="(item, index) of brandInfo.coupons"
          :key="index"
          :class="{'inActive': item.is_get < item.get_limit ? false : true }"
        >
          <div class="left">
            <p class="title">
              <i></i>
              <span>{{getShopName(item.shop_id)}}</span>
            </p>
            <p class="price">
              ¥
              <span>{{item.discount_money}}</span>
            </p>
            <p class="desc">使用条件：{{item.discount_limit}}。</p>
            <p class="time">
              <i></i>
              <span>{{item.start_at.split(' ')[0]}}～{{item.end_at.split(' ')[0]}}</span>
            </p>
          </div>
          <div class="right" @click="getCouponClick(item)">
            <span v-if="item.is_get < item.get_limit">
              立
              <br />即
              <br />领
              <br />取
            </span>
            <span v-else>
              已
              <br />领
              <br />取
            </span>
          </div>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>
<script>
import Scroll from '@/components/scroll/scroll'
import { getBrandItemDetail } from '@/api/home'
import EditMsg from '@/views/my/mixins/config-list'
import { getCouponItem } from '@/api/my'
const ERR_OK = 200
export default {
  components: {
    Scroll
  },
  mixins: [EditMsg],
  data () {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        }
        // Some Swiper option/callback...
      },
      show: false,
      couponList: [
        {
          is_receive: false
        },
        {
          is_receive: true
        }
      ],
      brandInfo: null
    }
  },
  computed: {
    userInfo () {
      const userInfo = this.$store.getters.userInfo
        ? this.$store.getters.userInfo
        : JSON.parse(localStorage.getItem('USER'))
      return userInfo
    }
  },
  created () {
    if (this.$route.query.id) {
      this._getBrandItemDetail(this.$route.query.id)
    }
  },
  methods: {
    getCouponClick (item) {
      const me = this
      // if (item.is_get < item.get_limit) {
      this._getCouponItem(item.id).then(res => {
        if (res.code === ERR_OK) {
          this.$toast({
            message: '领取成功~',
            duration: 1500,
            onClose: function () {
              me._getBrandItemDetail(me.$route.query.id)
            }
          })
        }
      })
      // } else {
      //   this.$toast('您已经不能再领取了~')
      // }
    },
    viewMoreClick () {
      this.show = true
    },
    // receiveClick (item) {
    //   if (item.is_receive) {
    //     this.$toast('您已经领取过啦!')
    //   } else {
    //     item.is_receive = !item.is_receive
    //     this.$toast('领取成功,请在我的优惠券中查询!')
    //   }
    // },
    _getBrandItemDetail (id) {
      getBrandItemDetail(id)
        .then(res => {
          if (res.code === ERR_OK) {
            this.brandInfo = res.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getCouponItem (id) {
      return getCouponItem(id).then(res => {
        if (res.code === ERR_OK) {
          this.$toast('领取成功~')
          return Promise.resolve(res)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.swiper-pagination {
  vertical-align: middle;
}
.swiper-container /deep/ .swiper-pagination-bullet-active {
  width: 0.2em;
  height: 0.2rem;
  border: 1px solid rgba(0, 4, 0, 1);
  background: transparent !important;
  border-radius: 50%;
}
.swiper-container /deep/ .swiper-pagination-bullet {
  width: 0.12rem;
  height: 0.12rem;
  background: rgba(0, 4, 0, 1);
  border-radius: 50%;
  transition: all 0.3s;
}
.brand-page {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 9;
  touch-action: none;
  .brand-scroll {
    width: 100%;
    height: 100%;
  }
  .swiper-container {
    width: 100%;
    // height: 5.2rem;
    img {
      width: 100%;
    }
  }
  .content {
    width: 100%;
    padding: 0 0.36rem;
    box-sizing: border-box;
    .top {
      padding-bottom: 0.87rem;
      border-bottom: 1px solid #eeeeee;
      .info-box {
        width: 100%;
        .title {
          width: 100%;
          padding: 0.87rem 0 0.57rem 0;
          box-sizing: border-box;
          font-size: 0.4rem;
          font-family: PingFang SC;
          font-weight: bold;
          color: rgba(0, 4, 0, 1);
          line-height: 0.3rem;
          font-weight: bold;
        }
        .tel-wrapper {
          .tel-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            span {
              font-size: 0.28rem;
              font-family: PingFang SC;
              font-weight: 400;
              color: rgba(0, 4, 0, 0.8);
              line-height: 0.57rem;
              white-space: nowrap;
            }
            a {
              display: flex;
              flex-direction: column;
              justify-content: flex-start;
              i {
                display: inline-block;
                width: 0.36rem;
                height: 0.34rem;
                background: url("../../assets/images/icon_ddh.png") no-repeat;
                background-size: cover;
                vertical-align: top;
              }
            }
          }
        }
        .desc {
          font-size: 0.32rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(0, 4, 0, 1);
          line-height: 0.57rem;
          padding: 0.6rem 0;
        }
      }
      .coupon {
        width: 100%;
        background: url("../../assets/images/券1.png") no-repeat;
        background-size: cover;
        height: 2.72rem;
        display: flex;
        align-items: center;
        padding-left: 0.5rem;
        box-sizing: border-box;
        .left {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          height: 100%;
          .name {
            font-size: 0.21rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(85, 85, 85, 1);
            line-height: 0.32rem;
          }
          .lot {
            font-size: 0.39rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(4, 0, 0, 1);
            margin-top: 0.58rem;
          }
        }
        .right {
          width: 1.46rem;
          height: 100%;
          background: rgba(242, 242, 242, 1);
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          span {
            font-size: 0.28rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(0, 4, 0, 1);
            line-height: 0.33rem;
          }
        }
      }
    }
    .bottom {
      .title {
        font-size: 0.38rem;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(0, 4, 0, 1);
        line-height: 0.38rem;
        padding: 0.8rem 0;
        i {
          display: inline-block;
          width: 0.24rem;
          height: 0.06rem;
          background: rgba(4, 36, 45, 1);
        }
      }
      .intro-msg {
        width: 100%;
        font-size: 0.28rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(0, 4, 0, 1);
        line-height: 0.57rem;
        padding-bottom: 1rem;
        /deep/ img {
          width: 100%;
          margin-bottom: 0.15rem;
        }
      }
    }
  }
  .coupon-action-sheet {
    .coupon-action-inner {
      margin: 0 auto;
      width: 6.78rem;
      padding: 0.7rem 0;
      .coupon-item {
        width: 100%;
        height: 3.28rem;
        display: flex;
        align-items: center;
        background: url("../../assets/images/bg_ljlq.png") no-repeat;
        background-size: cover;
        margin-bottom: 0.6rem;
        &.inActive {
          background: url("../../assets/images/bg_yijlq.png") no-repeat;
          background-size: cover;
        }
        .left {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          padding-left: 0.54rem;
          box-sizing: border-box;
          .title {
            display: flex;
            align-items: center;
            i {
              display: inline-block;
              width: 0.72rem;
              height: 0.23rem;
              background: url("../../assets/images/icon_logo .png") no-repeat;
              background-size: cover;
              vertical-align: middle;
              margin-right: 0.27rem;
            }
            span {
              font-size: 0.26rem;
              font-family: PingFang SC;
              font-weight: 400;
              color: rgba(4, 0, 0, 1);
              white-space: nowrap;
            }
          }
          .price {
            font-size: 0.26rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(4, 0, 0, 1);
            margin-top: 0.42rem;
            span {
              font-size: 0.6rem;
              font-family: Abel;
              font-weight: bold;
              color: rgba(4, 0, 0, 1);
            }
          }
          .desc {
            font-size: 0.2rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            line-height: 0.32rem;
            margin-top: 0.24rem;
          }
          .time {
            display: flex;
            align-items: center;
            margin-top: 0.38rem;
            i {
              display: inline-block;
              width: 0.32rem;
              height: 0.32rem;
              background: url("../../assets/images/icon_time.png") no-repeat;
              background-size: cover;
              vertical-align: middle;
              margin-right: 0.23rem;
            }
            span {
              font-size: 0.2rem;
              font-family: PingFang SC;
              font-weight: 400;
              color: rgba(4, 0, 0, 1);
            }
          }
        }
        .right {
          width: 1.46rem;
          height: 3.28rem;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 0.28rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          span {
            line-height: 0.35rem;
          }
        }
      }
    }
  }
}
</style>
